<template>
	<view class="">
		<u-checkbox-group placement="column">
			<view class="content u-border padding" v-for='(item,index) in addressList' :key='item.id'>
				<view class="top flex justify-between margin-bottom-sm">
					<view class="left flex align-center">
						<u-checkbox :checked="item.isCheck" activeColor="yellow" shape="circle" @change="checkboxChange(item.id,$event)">
						</u-checkbox>
						<text>{{item.address}}</text>
					</view>
					<view class="right ">
						<u-icon name="edit-pen" size="26"></u-icon>
					</view>
				</view>
				<u-line length="90%" margin="0 auto"></u-line>
				<view class="bottom margin-top-sm flex justify-between padding-lr-lg">
					<text>设为默认</text>
					<text>删除地址</text>
				</view>
			</view>
		</u-checkbox-group>
		<view class="choose-all flex align-center">
			<u-checkbox-group activeColor="yellow">
				<u-checkbox shape="circle" :checked="isAllCheck" @change="handelAllCheck">
				</u-checkbox>
			</u-checkbox-group>

			全选
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [{
						id: 0,
						isCheck: false,
						address: "北京"
					},
					{
						id: 1,
						isCheck: true,
						address: "南京"
					},
					{
						id: 2,
						isCheck: false,
						address: "上海"
					},
					{
						id: 3,
						isCheck: false,
						address: "广州"
					},
				],
				// isAllCheck: false
			};
		},
		computed: {
			isAllCheck() {
				return this.addressList.every(item => item.isCheck == true)
			}
		},
		methods: {
			checkboxChange: function(id, e) {
				this.addressList[id].isCheck = e
				console.log(this.addressList);
			},
			handelAllCheck(e) {
				this.addressList.forEach(item => item.isCheck = e)
			}

		},
		onShow() {
			if(!this.$store.state.userInfo.userName){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			background-color: grey;
			border-radius: 50%;
		}
	}
</style>